<template>
 <div class="mycelfall">
       <MianShiYaoQinVue v-if="flag"></MianShiYaoQinVue>
      <div class="myselftop">
      <img src="../../assets/img/myselfimg.png" alt="">
        </div>
        <div class="boddy">
          <div v-if="successLogin" class="boddytop">
            <div class="personage">
                <div class="boddy_headimg">
                    <img src="../../assets/img/myself.png" alt="">
                </div>
            </div>
            <span style="width:1rem;display:inline-block;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            "></span>
            <span style="width:2rem;display:inline-block;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            ">{{arr.politicsStatus}}</span>
            <div class="bianji" style="float:right;color: brown;">
                <span class="iconfont icon-bianji" style="margin-right:.1rem"></span>
                <span @click="shuxin">编辑</span>
            </div>
            <span style="width:1rem;display:inline-block;font-size: .2rem; color: #666;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            ">{{arr.birth}}岁</span>
             <span style="width:1rem;display:inline-block;font-size: .2rem; color: #666;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            ">{{arr.student}}</span>
             <span style="width:1rem;display:inline-block;font-size: .2rem; color: #666;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            ">{{arr.practicing}}</span>
              <span style="width:1.5rem;display:inline-block;font-size: .2rem; color: #666;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            ">{{arr.masterpiece}}</span>
          </div>
          <div v-else="successLogin" class="boddytop">
            <div class="personage">
                <div class="boddy_headimg">
                    <img src="../../assets/img/myself.png" alt="">
                </div>
                <div @click="denglu" class="nologin">
                    <h2 style="float:left;font-size: .3rem;">未登录</h2><br>
                <b style="font-size:.2rem;color:#ccc;width: 2rem;">请先登录或注册!</b>
                </div>
            </div>
        </div> 
        <!-- 如果没有登录 -->
          <div class="boddybottom">
              <div @click="shuxin" class="boddybottomItem">
                  <i class="iconfont icon-shuaxin"></i>
                  <span>刷新简历</span>
              </div>
              <div @click="dingyue" class="boddybottomItem">
                  <i class="iconfont icon-dingyue-"></i>
                  <span>订阅职位</span>
              </div>
              <div @click="jilu" class="boddybottomItem">
                  <i class="iconfont icon-c-jilu"></i>
                  <span>应聘记录</span>
              </div>
              <div  @click="shoucang" class="boddybottomItem">
                  <i class="iconfont icon-shoucang"></i>
                  <span>职位收藏</span>
              </div>
          </div>
         
        </div>
            <div class="boddyList">
              <div class="listlogo">
                  <div class="logo">
                      <i class="iconfont icon-sousuo"></i>
                  </div>
                    <router-link tag="span" style="margin-left:.3rem" to="/position/zhiw">找工作</router-link>
                    <span class="el-icon-arrow-right" style="font-size:.4rem;float: right;"></span>
              </div>
                <div class="listlogo">
                  <div class="logo">
                      <i class="iconfont icon-shipin"></i>
                  </div>
                    <span style="margin-left:.3rem">面试邀请</span>
                    <span class="el-icon-arrow-right" style="font-size:.4rem;float: right;"></span>
              </div>
                <div class="listlogo">
                  <div class="logo">
                      <i class="iconfont icon-kefufenxiermaikefu"></i>
                  </div>
                    <span @click="kefu" style="margin-left:.3rem">在线客服</span>
                    <span class="el-icon-arrow-right" style="font-size:.4rem;float: right;"></span>
              </div>
                <div class="listlogo">
                  <div class="logo">
                      <i class="iconfont icon-fanhui"></i>
                  </div>
                    <span @click="del" style="margin-left:.3rem" onclick="replaceDoc()">退出登录</span>
                    <span class="el-icon-arrow-right" style="font-size:.4rem;float: right;"></span>
              </div>
          </div>
       
 </div>
</template>

<script>
import MianShiYaoQinVue from './MianShiYaoQin.vue'
import { mapState,mapMutations } from 'vuex'
export default {
    data(){
        return{
            flag:false
        }
    },
    methods:{
        ...mapMutations(["gologin","cencel"]),
        //点击客服
        kefu(){
            this.flag=!this.flag;
        },
        denglu(){//点击登录
            this.$router.push("resume/login")
        },
        shuxin(){//刷新简历
        this.$router.push("resume")
        },
        dingyue(){//订阅职位
         console.log("2222");
        },
        jilu(){//历史记录
         console.log("3333");
        },
        shoucang(){//收藏
         console.log("4444");
        },
        del(){
            window.localStorage.removeItem("token");
            this.$store.commit("cencel",0)
            window.location.href="../../App.vue"
        }
    },
    computed:{
        ...mapState(['successLogin',"arr"])
    },
    components:{
       MianShiYaoQinVue
    }
}
</script>

<style>
.mycelfall{
    width: 100%;
    height: 100%;
    background-color: white;
}
.myselftop{
    width: 100%;
    height: 5.06667rem;
    background: -webkit-gradient(linear,left bottom,left top,from(#ba050e),to(#d00711));
    background: -o-linear-gradient(bottom,#ba050e,#d00711);
    background: linear-gradient(0deg,#ba050e,#d00711);
    border-radius: 0 0 1.6rem 1.6rem;
    z-index: 1;
    text-align: center;
    background-color: white;

}
.myselftop>img{
    margin-top: 0.96rem;
    opacity: .69;
    width: 6rem;
}
.boddy{
    position: relative;
    z-index: 2;
    background: hsla(0,0%,100%,.89);
    -webkit-backdrop-filter: blur(.37333rem);
    backdrop-filter: blur(0.37333rem);
    border: 0.02667rem solid #fff;
    margin: -1.86667rem 0.32rem 0.48rem;
    -webkit-box-shadow: 0 0.10667rem 0.21333rem 0 rgb(0 0 0 / 5%);
    box-shadow: 0 0.10667rem 0.21333rem 0 rgb(0 0 0 / 5%);
    border-radius: 0.21333rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 4rem;
    font-size: .34667rem;
    padding: .2rem;
}
.boddy_headimg{
    float: left;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 2.02667rem;
    overflow: hidden;
    margin-right: 0.48rem;
    border: 0.02667rem solid #f5f5f5;
}
.boddy_headimg>img{
    width: 100%;
    height: 100%;
}
.personage{
    float: left;
}
.boddytop{
    max-height: 2.5rem;
    border-bottom: .02rem solid #f5f5f5;
    margin-bottom: .5rem;
    min-height: 2.5rem;
}
.boddybottom{
    display: flex;
    justify-content: space-around;
}

.boddybottomItem{
    font-size: .3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: black;
}
.boddybottomItem>i{
    color: #ba050e;
    margin-bottom: .2rem;
}
.boddyList{
    min-height: 4.5rem;
}
.listlogo{
    min-height: 1rem;
    border-bottom: .01rem solid #f5f5f5;
    padding-top: .2rem;
    padding-left: .2rem;
    padding-right: .2rem;
}
.logo{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #ffeced;
    float: left;
    text-align: center;
    margin-left: .24rem;
    font-size: .3rem;
    color: black;

}
.logo>i{
    font-size: .3rem;
    color: #ba050e;
}
.nologin{
    float: left;
}
/* <div class="boddyList">
              <div class="listlogo">
                  <div class="logo"></div>
                    <span>找工作</span>
                    
              </div> */

</style>